<pagination-template #p="paginationApi" [id]="id" [maxSize]="maxSize" (pageChange)="pageChange.emit($event)">
  <ul class="ngx-pagination" role="navigation" *ngIf="!(autoHide && p.pages.length <= 1)">
    <li class="pagination-previous" [class.disabled]="p.isFirstPage()" *ngIf="directionLinks">
      <a *ngIf="1 < p.getCurrent()" (click)="p.previous()">
       {{ previousLabel }}
     </a>
      <span *ngIf="p.isFirstPage()">
       {{ previousLabel }}
      </span>
    </li>
    <li [class.current]="p.getCurrent() === page.value" *ngFor="let page of p.pages">
      <a href="javascript:;" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value"> {{ page.label }} </a>
      <a href="javascript:;" *ngIf="p.getCurrent() === page.value"> {{ page.label }} </a>
    </li>
    <li class="pagination-next" [class.disabled]="p.isLastPage()" *ngIf="directionLinks">
      <a *ngIf="!p.isLastPage()" (click)="p.next()">
       {{ nextLabel }}
     </a>
      <span *ngIf="p.isLastPage()">
        {{ nextLabel }}
      </span>
    </li>
  </ul>
</pagination-template>
